btn-color($color)
  $renderColor = lookup('$' + $color + '-color')
  background-color $renderColor
  border 1px solid lighten($renderColor, 5)
  color $white-color
  &:hover
    background-color lighten($renderColor, 5)
    border 1px solid lighten($renderColor, 5)

btn-text-color($color)
  $renderColor = lookup('$' + $color + '-color')
  background-color $white-color
  color $renderColor
  &:hover
    color lighten($renderColor, 10) !important


.{$button-prefix}
  padding 8px 15px
  background-color $white-color
  border 1px solid $gray3-color
  border-radius $border-radius-size
  box-shadow 0 1px 1px 0 $gray3-color
  outline none
  cursor pointer
  font-size $font-size-mini
  &:hover
    border 1px solid $primary-color
    color $primary-color
  &.{$button-prefix}[disabled], &.{$button-prefix}[disabled]:hover
    background-color $gray4-color
    border 1px solid $gray3-color
    color lighten($dark-color, 20)
    z-index 0
    cursor not-allowed
  +.{$button-prefix}
    margin-left 8px
  >i+span, >span+i
    margin-left 5px
  &.{$button-prefix}
    &-primary
      btn-color('primary')
    &-green
      btn-color('green')
    &-blue
      btn-color('blue')
    &-yellow
      btn-color('yellow')
    &-red
      btn-color('red')
    &-gray
      btn-color('gray')
    &-text-primary
      btn-text-color('primary')
    &-text-green
      btn-text-color('green')
    &-text-blue
      btn-text-color('blue')
    &-text-yellow
      btn-text-color('yellow')
    &-text-red
      btn-text-color('red')
    &-text-gray
      btn-text-color('gray')
    &-l
      padding 10px 20px
      font-size 110%
    &-s
      padding 5px 10px
    &-xs
      padding 2px 6px
    &-text, &-no-border
      border none
      box-shadow none
      &[disabled], &[disabled]:hover
        background-color transparent
        border none
        box-shadow none
      &:hover
        border none
